function render() {
  console.log('页面渲染')
}
let arr1 = [1, 2, 3]
let methods = ['pop', 'shift', 'unshift', 'sort', 'reverse', 'splice', 'push']
let obj = {
  name: '柚子',
  age: { x: 0, y: { a: 5 } },
}
// 先获取到原来的原型上的方法
let arrayProto = Array.prototype
//创建自己的原型，重写methods方法
let proto = Object.create(arrayProto)

methods.forEach(method => {
  proto[method] = function () {
    arrayProto[method].call(this, ...arguments)
    render()
  }
})

function observe(data) {
  if (Array.isArray(data)) {
    data.__proto__ = proto
    return
  }
  if (typeof data == 'object') {
    Object.keys(data).forEach(key => {
      defineReactive(data, key, data[key])
    })
  }

  function defineReactive(data, key, value) {
    observe(value)
    Object.defineProperty(data, key, {
      get() {
        return value
      },
      set(newvalue) {
        observe(newvalue)
        if (value !== newvalue) {
          value = newvalue
          render()
        }
      },
    })
  }
}
observe(obj)
observe(arr1)
obj.age.y = { a: 0.555 }
arr1.push(9)
console.log('橘子', arr1)
console.log('obj--', obj)
